<template>
  <base-breadcrumb :title="titleName">
    <searchData
      :search-data="searchArr"
      @search="search"
    />

    <a-card :bordered="false">
      <title-name title="分包商季度考核列表" />
      <a-button type="primary" @click="t">点我</a-button>
      <a-button type="primary" v-if="isShowBatchBtn">批量</a-button>
      <a-button type="primary" @click="s">export-list</a-button>
      <div class="pub-table-select-count">
        <a-icon
          type="info-circle"
          theme="twoTone"
        />
        <span style="margin-right: 12px"> 分包商总数：<span class="totalNum">{{ totalSize }} 个</span>   </span>
        <!--<span style="margin-right: 12px"> 考核中分包商：<span class="totalNum">{{totalDels.inAssessmentNum}} 个</span> |  考核完分包商：<span class="totalNum">{{totalDels.overAssessmentNum}} 个</span> </span>-->
      </div>

      <s-table
        ref="table"
        bordered
        :scroll="{x:965}"
        size="default"
        :row-key="record => record.id"
        :columns="columns"
        :data="loadData"
        :alert="true"
        show-size-changer
        show-quick-jumper
        show-pagination="auto"
      >
        <span
          slot="serial"
          slot-scope="text, record, index"
        >
          {{ index + 1 }}
          <span
            v-if="record.statusName=='待考核'"
            class="inspection notInspection"
          >待考核</span>
          <span
            v-else-if="record.statusName=='已考核'"
            class="inspection alreadyInspection"
          >已考核</span>
          <span
            v-else-if="record.statusName=='考核中'"
            class="inspection ingInspection"
          >考核中</span>
          <span
            v-else-if="record.statusName=='全部已考核'"
            class="inspection allInspection"
          >全部已考核</span>
        </span>
        <span
          slot="status"
          slot-scope="text"
        >
          <a-badge
            :status="text | statusTypeFilter"
            :text="text | statusFilter"
          />
        </span>
        <span
          slot="type"
          slot-scope="text"
        >
          <ellipsis
            :length="20"
            tooltip
          >{{ text }}</ellipsis>
        </span>
        <span
          slot="action"
          slot-scope="text, record"
        >
          <template>
            <a
              v-btnPermission="'pm_022_loo_01'"
              @click="handleDels(record)"
            >查看</a>
            <a-divider type="vertical" />
            <a
              v-if="record.statusName !== '全部已考核'"
              v-btnPermission="'pm_022_che_02'"
              @click="handleEdit(record)"
            >考核</a>
          </template>
        </span>
      </s-table>
    </a-card>
  </base-breadcrumb>
</template>

<script>
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import {
  batchList,
  exportList,
  getQuarterAssessmentList,
  queryBatchButton
} from '@/api/subcontractors/quarterAssessment'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import { getTypes } from '@/api/commons'
import ARow from 'ant-design-vue/es/grid/Row'


const columns = [
  {
    title: '序号',
    width: '110px',
    align: 'center',
    custom: true,
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '考核分包商名称',
    width: '200px',
    align: 'center',
    dataIndex: 'subcontractorName'
  },
  {
    title: '项目',
    align: 'center',
    width: '150px',
    dataIndex: 'projectName'
  },
  {
    title: '分公司',
    align: 'center',
    width: '100px',
    dataIndex: 'branch'
  },
  {
    title: '考核时间',
    align: 'center',
    width: '100px',
    dataIndex: 'assessmentTime'
  },
  {
    title: '考核分数',
    align: 'center',
    width: '100px',
    dataIndex: 'assessmentScore'
  },
  {
    title: '考核等级',
    width: '100px',
    dataIndex: 'assessmentLevel'
  },
  {
    title: '操作',
    align: 'center',
    dataIndex: 'action',
    width: '100px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'a' + Date.now(),
  components: {
    STable,
    Ellipsis
  },
  data() {
    this.columns = columns
    return {
      isShowBatchBtn: false,
      searchArr: [
        // 搜索框
        {
          name: '分包商名称',
          value: 'subcontractors',
          type: 'input'
        },
        {
          name: '分公司',
          valueKey: 'branch',
          type: SelectSubCompany
        },
        {
          name: '考核等级',
          type: 'select',
          value: 'assessmentLevel',
          data: []
        }
      ],
      titleName: '',
      totalSize: '', // 总数

      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        // if (this.queryParam.createdTime && this.queryParam.createdTime.length > 0) {
        //   this.queryParam.startTime = this.queryParam.createdTime[0].format('YYYY-MM-DD')
        //   this.queryParam.endTime = this.queryParam.createdTime[1].format('YYYY-MM-DD')
        //   delete this.queryParam.createdTime
        // }
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        exportList(requestParameters).then(re => {
        })
        return getQuarterAssessmentList(requestParameters)
          .then(res => {
            this.totalSize = res.totalSize
            return res
          })
      },
      selectedRowKeys: [],
      selectedRows: [],
      totalDels: {}
    }
  },
  created() {
    this.getTypes()
    this.getIsShowBatchBtn()
  },
  methods: {
    async getIsShowBatchBtn() {
      const res = await queryBatchButton()
      if (res.code === 200) {
        this.isShowBatchBtn = res.data == 1
      }
    },
    async t() {
      await batchList({
        assessmentTime: '2022年第一季度'
      })
    },
    async s() {
      this.$refs.table.refresh(true)
    },
    getTypes() {
      getTypes({ type: 16 }).then(res => {
        this.searchArr[3].data = this.getChangeDatatTypes(res.data)
      })
    },
    search(val) {
      this.queryParam = val
      this.$refs.table.refresh(true)
    },
    handleDels(val) {
      this.$router.push({ path: '/quarter/details', query: { assessmentId: val.id } })
    },

    handleEdit(val) {
      this.$router.push({ path: '/quarter/editAssessment', query: { assessmentId: val.id } })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date())
      }
    }
  }
}
</script>
<style scoped>
.inspection {
  display: inline-block;
  width: 88px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
}

.inspection.notInspection {
  background-color: #FFD700;
}

.inspection.alreadyInspection {
  background-color: #87CEFA;
}

.inspection.ingInspection {
  background-color: #FFE4C4;
}

.inspection.allInspection {
  background-color: #00FA9A;
}
</style>


